<template>
  <div>
    <h3>地址页面</h3>

    <p>{{ obj }}</p>
    {{ addss_list }}
    <table style="width:1000px;margin:0 auto">
        <tr>
            <th>编号</th>
            <th>昵称</th>
            <th>手机号</th>
            <th>地址</th>
            <th>所属用户外键</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,i) in addss_list" :key="i">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.mobile}}</td>
            <td>{{item.addr}}</td>
            <td> {{ item.people }}</td>
            <td>
                <el-button @click="updateOne(item)">编辑</el-button>
                <el-button @click="del(item.id)">删除</el-button>
            </td>

        </tr>
    </table>
    <h3>修改</h3>
    <div> 昵称<input type="text" v-model="update_list.name">  </div>
    <div> 昵称<input type="text" v-model="update_list.mobile">  </div>
    <div> 地址<input type="text" v-model="update_list.addr">  </div>
    <div> <el-button @click="updatelist">修改</el-button>  </div>



    <h3>添加</h3>
    <div> 昵称<input type="text" v-model="add_list.name">  </div>
    <div> 昵称<input type="text" v-model="add_list.mobile">  </div>
    <div> 地址<input type="text" v-model="add_list.addr">  </div>
    <div> 所属用户<input type="text" v-model="add_list.people">  </div>
    <div> <el-button @click="addOnew">添加</el-button>  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            obj:this.$route.params.id,
            addss_list:[],
            update_list:{},
            add_list:{name:'',mobile:'11111111111',addr:'河南',people:1},
            

        }
    },
    mounted(){
        this.getAdd()
    },
    methods:{
        del(id){
            axios.delete('http://127.0.0.1:8000/users/addre/'+id+'/')
            .then(resp=>{
                console.log(resp);
                if(resp.data.code == 200){
                    alert('删除成功')
                    this.getAdd()
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },
        addOnew(){
            axios.post('http://127.0.0.1:8000/users/addone/',this.add_list)
            .then(resp=>{
                console.log(resp);
                if(resp.data.code == 200){
                    alert('添加成功')
                    this.getAdd()
                }
            })
            .catch(err=>{
                console.log(err);
            })
            
        },
        updatelist(){
            axios.put('http://127.0.0.1:8000/users/addre/'+this.update_list.id+'/',this.update_list)
            .then(resp=>{
                console.log(resp);
                if(resp.data.code == 200){
                    alert('修改成功')
                    this.getAdd()
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },

        updateOne(item){
            this.update_list={...item}
        },
        getAdd(){
            axios.get('http://127.0.0.1:8000/users/addre/'+this.obj+'/')
            .then(resp=>{
                console.log(resp);
                this.addss_list=resp.data

            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}
</script>

<style>

</style>